<template>
  <view class="video-wrok bg-white mt-[30rpx] px-[30rpx] box-border">
    <view class="video-content flex justify-between">
      <view class="video-date flex items-center">
        <text class="doc w-[8rpx] h-[8rpx] mr-[12rpx] rounded-full"></text>
        <text class="text-[36rpx] font-bold text-[#1b1b1b]">2</text>
        <text class="text-[24rpx] date-m">/12</text>
      </view>
      <view class="video-attr flex">
        <view
          v-for="item in 3"
          :key="item"
          class="pr-[16rpx] pl-[16rpx] h-[48rpx] bg-[#EBF7F4] text-[#304540] rounded-full ml-[32rpx]"
        >
          AI内容
        </view>
      </view>
    </view>
    <wd-row flex justify="space-between">
      <wd-col :span="12" v-for="item in 4" :key="item">
        <view
          class="w-[323rpx] h-[323rpx] mt-25rpx img-box rounded-[20rpx] bg-[rgba(0,0,0,0.3)]"
        >
          <video src="#" controls poster="/static/images/bg.png"></video>
          <view class="play-btn w-[98rpx] h-[98rpx] left-[50%] top-[50%]">
            <image
              mode="aspectFill"
              class="w-[100%] h-[100%]"
              src="/static/images/play-btn.png"
            />
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
</template>
<script lang="ts" setup>
import { defineProps } from "vue";

const props = defineProps<{
  detailData: any;
}>();
</script>
<style lang="scss" scoped>
.video-wrok {
  .video-content {
    position: relative;
    .doc {
      background: rgba(200, 255, 122, 1);
    }
    .date-m {
      position: relative;
      top: 2rpx;
      margin-left: 8rpx;
      color: rgba(27, 27, 27, 0.4);
    }
  }
  .img-box {
    position: relative;
    overflow: hidden;
    .play-btn {
      position: absolute;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
